<template>
  <div class="bgc">
    <div style="display: flex; justify-content: center; margin-top: 225px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>注册</span>
        </div>
        <table>
          <tr>
            <td>用户名:</td>
            <td>
              <el-input
                v-model="user.username"
                placeholder="请输入用户名"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>密码:</td>
            <td>
              <el-input
                type="password"
                v-model="user.password"
                placeholder="请输入密码"
                @keydown.enter.native="doLogin"
              ></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>

          <tr>
            <td>确认密码：</td>
            <td>
              <el-input
                type="password"
                v-model="user.confirmpassword"
                placeholder="请确认密码"
              ></el-input>
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 取消的点击事件是cancel -->
              <!-- 注册的点击事件是register -->
              <el-button
                style="width: 160px"
                type="danger"
                plain
                @click="cancel"
                >取消</el-button
              >
              <el-button
                style="width: 160px"
                type="success"
                plain
                @click="doLogin"
                >注册</el-button
              >
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
import { postRegister } from "../api/users";
export default {
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return {
      //之前是在里面直接写username，password等等，但是这里要写return
      //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
      //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
      //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
      //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
      //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
      user: {
        username: "",
        password: "",
        confirmpassword: "",
        remarks: "",
        //为了登录方便，可以直接在这里写好用户名和密码的值
      },
    };
  },
  methods: {
    // 注册界面 注册按钮
    doLogin() {
      // 如果用户不为空并且密码与确认密码一致,那么进行后端请求
      if (
        this.user.username.trim() !== null &&
        this.user.password.trim() !== null &&
        this.user.confirmpassword.trim() !== null
      ) {
        // 如果两次密码正确
        if (this.user.password.trim() === this.user.confirmpassword.trim()) {
          postRegister(this.user)
            .then(({ data }) => {
              if (data.code === 200) {
                this.$message({
                  message: data.msg,
                  type: "success",
                });
                this.$router.push("/login");
              } else {
                this.$message.error(data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
        // 如果两次密码不正确 
        else {
          let msg = "两次密码不正确";
          this.$message.error(msg);
        }
      } else {
        let msg = "用户名或密码不能为空";
        this.$message.error(msg);
      }
    },
    cancel() {
      //取消按钮
      this.$router.push("/index");
    },
  },
};
</script>
<style>
.bgc {
  background-image: url("../image/aa.gif");
  background-repeat: no-repeat;
  /* background-position: bottom center; */
  height: 71vh;
}
</style>